<template>
      <li class="tab-bar-item" @click="itemClick">
        <slot v-if="!isActive" name="item-icon"></slot>
        <slot v-else name="item-icon-active"></slot>
        <div :style="Actstyle">
           <slot name="item-text" ></slot>
        </div>
      </li>
</template>
<script>
export default {
  props:{
    path:String,
    actColor:{
      type:String,
      default:'red'
    }
  },
  name: 'Tabbaritem',
  components: {},
  directives: {},
  data() {
    return {
      //isActive:true
    };
  },
  computed:{
    isActive(){
      return this.$route.path.indexOf(this.path) !== -1
    },
    Actstyle(){
      return this.isActive ? {color:this.actColor} :{}
    }
  },
  mounted() {
    
  },
  methods: {
    itemClick(){
      this.$router.replace(this.path).catch(error=> error)
    }
  },
};
</script>
<style scoped>
.item-con{
  display: flex;
}
.tab-bar-item{
    height:49px;
    flex: 1;
    text-align: center;
    line-height: 20px;
    align-self: center;
    font-size: 14px;
}
.tab-bar-item p{
  margin-top:5px;
}
.tab-bar-item img{
  display: block;
  width:20px;
  height:20px;
  margin:3px auto 0;
}
</style>